<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简介</title>
    <link rel="stylesheet" href="css/base.css" charset="utf-8">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.js"></script>
    <script type="text/javascript" src="js/base.js"></script>
</head>
<body>
    <div class="header">
        <div class="nav">
            <a href=""><img src="../images/daohang.png" alt=""></a>
            <div class="menu">
                <a href="#section1" rel="external nofollow" class="current">个人介绍</a>
                <a href="#section2" rel="external nofollow">职业技能</a>
                <a href="#section3" rel="external nofollow">项目展示</a>                
                <a href="#section4" rel="external nofollow">兴趣爱好</a>                
                <a href="#section5" rel="external nofollow">我的足迹</a>                
                <a href="#section6" rel="external nofollow">联系方式</a>
                <a href="">返回小组</a>                
            </div>
        </div>
    </div>

    <div class="touxiang">
        <span>迪士尼在逃公主</span>
        <img src="../images/head2.jpg" alt="">
        <p>“欢迎光临”</p>
    </div>

    <div class="content">

        <div class="more">
            <div class="title">未完待续</div>
            <div class="bg"></div>
        </div>

        <div class="info" id="section1">
            <div class="title">个人介绍</div>
            <div class="thing">
                <div class="pic">
                    <img src="../images/me.jpg" alt="">
                </div>
                <div class="aboutme">
                    <div class="name">姓名：姚炫亦</div>
                    <div class="sex">性别：女</div>
                    <div class="mingzu">民族：汉</div>
                    <div class="age">年龄：20</div>
                    <div class="add">籍贯：四川攀枝花</div>
                    <div class="school">学校：武汉工程大学</div>
                </div>
                <div class="something">
                    <p>大学三年普通平凡，与大部分大学生无益，每天上课下课，闲暇时光会参与部分学校活动。在参加活动的过程中，认识了不少新朋友，培养了自己沟通表达能力，同时培养了自己的时间管理能力，逐渐平衡课余与学习。</p>
                    <p>职业规划是在毕业后预计先找份工作，培养自己的技术以及团队项目合作意识注意事项等。</p>
                    <p>我认为html5的运用是非常广泛的，实质是视觉通过电子产品接触到的信息。随着生活的发展，人们对电子产品的依赖逐渐增加，软件数量飞速激增。接触电子产品，除了产品本身外观，软件网页的页面也必不可少，这些势必需要运用前端知识。</p>
                </div>
            </div>
        </div>
       
        <div class="info" id="section2">
            <div class="title">职业技能</div>
            <div class="thing">
                <div class="skill">
                    <div class="skill-name">C语言</div>
                    <div id="progresscontainer">
                        <div id="progress" style="width:0%"></div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skill-name">HTML</div>
                    <div id="progresscontainer">
                        <div id="progres" style="width:0%"></div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skill-name">JavaScript</div>
                    <div id="progresscontainer">
                        <div id="progre" style="width:0%"></div>
                    </div>
                </div>
                <div class="skill">
                    <div class="skill-name">数据库</div>
                    <div id="progresscontainer">
                        <div id="pro" style="width:0%"></div>
                    </div>
                </div>
            </div>
        </div>
       
        <div class="info" id="section3">
            <div class="title">项目展示</div>
            <div class="thing projectshow">
                <div class="projectshow1"><a href="https://yaoxuanyi.gitee.io/homework0528"><img src="../images/project0528.png" alt=""></a></div>
                <div class="projectshow2"><a href=" https://yaoxuanyi.gitee.io/homework0601"><img src="../images/project0601.png" alt=""></a></div>
                <div class="projectshow2"><a href="https://yaoxuanyi.gitee.io/homework0604"><img src="../images/project0604.png" alt=""></a></div>
                <div class="projectshow2"><a href="https://yaoxuanyi.gitee.io/homework0605"><img src="../images/project0605.png" alt=""></a></div>
                <div class="projectshow1"><a href=" https://yaoxuanyi.gitee.io/homework0608"><img src="../images/project0608.png" alt=""></a></div>
                <div class="projectshow2"><a href="https://yaoxuanyi.gitee.io/homework0609"><img src="../images/project0609.png" alt=""></a></div> 
                <div class="projectshow2"><a href="https://yaoxuanyi.gitee.io/homework0611"><img src="../images/project0611.png" alt=""></a></div>
                <div class="projectshow2"><a href="https://yaoxuanyi.gitee.io/homework0617"><img src="../images/project0617.png" alt=""></a></div>
            </div>
        </div>
       
        <div class="info" id="section4">
            <div class="title">兴趣爱好</div>
            <div class="thing hobby">
                <div class="hobby-info">
                    <div class="hobby-title">影<br>视<br>追<br>剧</div>
                    <div class="hobbyshow">
                        <img src="../images/hobby1.PNG" alt="">
                    </div>
                    <div class="hobbyshow">
                        <img src="../images/hobby2.jpg" alt="">
                    </div>
                </div>
                <div class="hobby-info">
                    <div class="hobby-title">片<br>段<br>拼<br>凑</div>
                    <div class="hobbyshow">
                        <img src="../images/hobby3.jpg" alt="">
                    </div>
                    <div class="hobbyshow">
                        <img src="../images/hobby4.jpg" alt="">
                    </div>
                </div>
                <div class="hobby-info">
                    <div class="hobby-title">幼<br>稚<br>消<br>遣</div>
                    <div class="hobbyshow">
                        <img src="../images/hobby5.jpg" alt="">
                    </div>
                    <div class="hobbyshow">
                        <img src="../images/hobby7.png" alt="">
                    </div>
                </div>
                <div class="hobby-info">
                    <div class="hobby-title">日<br>落<br>而<br>息</div>
                    <div class="hobbyshow">
                        <img src="../images/hobby8.jpg" alt="">
                    </div>
                    <div class="hobbyshow">
                        <img src="../images/hobby9.jpg" alt="">
                    </div>
                </div>
            </div>
        </div>
        
        <div class="info" id="section5">
            <div class="title">我的足迹</div>
            <div class="thing foot">
                <div class="footshow">
                    <img src="../images/wh11.jpg" alt="">
                    <span class="footinfo">汉<br>口<br>钟<br>楼</span>
                </div>
                <div class="footshow">
                    <img src="../images/wh12.jpg" alt="">
                    <span class="footinfo">孤<br>单<br>风<br>筝</span>
                </div>
                <div class="footshow">
                    <img src="../images/wh21.jpg" alt="">
                    <span class="footinfo">路<br>边<br>美<br>食</span>
                </div>
                <div class="footshow">
                    <img src="../images/wh22.jpg" alt="">
                    <span class="footinfo">驶<br>过<br>火<br>车</span>
                </div>
                <div class="footshow">
                    <img src="../images/wh31.jpg" alt="">
                    <span class="footinfo">楼<br>宇<br>一<br>角</span>
                </div>
                <div class="footshow">
                    <img src="../images/wh32.jpg" alt="">
                    <span class="footinfo">高<br>傲<br>猫<br>猫</span>
                </div>
                <div class="footshow">
                    <img src="../images/wh41.jpg" alt="">
                    <span class="footinfo">白<br>云<br>人<br>家</span>
                </div>
                <div class="footshow">
                    <img src="../images/wh42.jpg" alt="">
                    <span class="footinfo">登<br>黄<br>鹤<br>楼</span>
                </div>
                <div class="footshow">
                    <img src="../images/wh51.jpg" alt="">
                    <span class="footinfo">窗<br>外<br>东<br>湖</span>
                </div>
                <div class="footshow">
                    <img src="../images/wh52.jpg" alt="">
                    <span class="footinfo">漏<br>光<br>小<br>巷</span>
                </div>
            </div>
        </div>
       
        <div class="info" id="section6">
            <div class="title">联系方式</div>
            <div class="thing">
                <div class="contactme">
                    <div>
                        <img src="../images/dianhua.png" alt="">
                        <span>+86 151 8237 1789</span>
                    </div>
                    <div>
                        <img src="../images/weixin.png" alt="">
                        <span>15182371789</span>
                    </div>
                    <div>
                        <img src="../images/youxiang.png" alt="">
                        <span>270800084@qq.com</span>
                    </div>
                    <div>
                        <img src="../images/qq.png" alt="">
                        <span>270800084</span>
                    </div>
                    <div>
                        <img src="../images/weibo.png" alt="">
                        <span>蔚蓝天空</span>
                    </div>
                </div>
                <div class="contactyou">
                    <div class="contactyou-title">请留下您联系方式以便我联系您</div>
                    <form action="/doAdd" method="POST" role="form">
                        <div class="urname">
                            <input type="text" placeholder="请输入姓名" name="name" text>
                        </div>
                        <div class="urtel">
                            <input type="text" placeholder="请输入电话" name="tel">
                        </div>
                        <div class="uremail">
                            <input type="text" placeholder="请输入邮箱" name="email">
                        </div>
                        <div class="urword">
                            <input type="text" placeholder="请输入留言..." name="other">
                            <button type="submit">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>

    <div class="footer">
        <span></span>
    </div>

    <div class="top">
        <a href="#top" target="_self"><img src="images/dingbu.png" alt=""></a>
    </div>
</body>
</html>